<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    1.this关键字
    this是js的关键字,存在函数的内部,随着函数的调用的不同去改变,改变的this的指向
    但是有一个总的原则,谁调用函数就指向谁

    ***
    每一个函数内部都有this关键字
    可以直接使用
    重点:函数内部的this只和函数的调用方式有关系,和函数定义的方式没有关系
    ***

    2.函数前面如果没有其他的对象调用,默认指向window
    <hr>
    <ul>
        <li>11111</li>
        <li>2222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
    <script>
        // function fn(){
        //     console.log(this);//window
        // }
        // fn();//this---window
        // window.fn();//this---window
    </script>

    <!-- 3.自定义对象 -->
    <script>
        // var obj={
        //     name:"zs",
        //     showname:function(){
        //         console.log(this);//--obj
        //         console.log(this.name);//"zs"
        //     }
        // }
        // obj.showname()
    </script>

    <!-- 4.匿名函数 -->
    <script>
        // var fn =function () {
        //     console.log(this);
        // }
        // fn(); //this---window

        // !function(){
        //     console.log(this);
        // }()  //this---window

        // window.setInterval(function(){
        //     console.log(this);
        // },3000)  //this---window
    </script>

    <!-- this的作用 -->
    <script>
        var list=document.querySelectorAll("li");
        // list.forEach(function(item){
        //     // console.log(item);
        //     item.onclick=function(){
        //         console.log(item.innerHTML);
        //     }
        // })


        for(var i=0;i<list.length;i++){
            // console.log(list[i]);
            list[i].onclick=function(){//i的取值范围0-3
                // console.log(list[i]);//i=4
                // console.log(i);//i=4
                console.log(this.innerHTML);
            }
        }
    </script>
</body>
</html>